<template>
  <div id="home">
    <div v-if="!showLoading">
      <router-view></router-view>

      <Sowing :sowing_list="sowing_list" />

      <van-grid
        :column-num="item_list.length"
        :border="false"
        class="vangridStyle"
      >
        <van-grid-item
          v-for="(value, index) in item_list"
          :key="index"
          :text="value.name"
          :icon="value.icon"
          @click="clickGridItem(value)"
        >
        </van-grid-item>
      </van-grid>

      <OrderDynamics
        :order_list="orderList"
        :clickAction="moreOrder"
        v-show="orderList.length > 0"
      ></OrderDynamics>

      <HomeNewsDiv
        :clickAction="allNews"
        :new_list="newsList"
        v-show="newsList.length > 0"
      ></HomeNewsDiv>

      <!--<YouLike :you_like_product_list="you_like_product_list" />-->

      <!--<MarkPage :scrollToTop="scrollToTop" v-show="showBackStatus"/>-->

      <div class="tabbarShelter"></div>
    </div>

    <van-loading
      v-else
      type="spinner"
      color="#75a342"
      style="position: absolute;left:50%;top: 40%;transform: translate(-50%)"
    >
      正在拼命加载中…
    </van-loading>
  </div>
</template>

<script>
import Sowing from "./components/sowing/Sowing";
import TitleLabel from "./components/titleLabel/TitleLabel";
import YouLike from "./components/youLike/YouLike";
import MarkPage from "./components/markPage/MarkPage";
import OrderDynamics from "./components/orderDynamics/OrderDynamics";
import HomeNewsDiv from "./components/news/HomeNewsDiv";
import { getStore } from "@/config/global";
import { mapActions, mapState } from "vuex";

import { getHomeData } from "./../../service/api/index";
import { showBack, animate } from "@/config/global";
import { actionWithLink, addImagePrefix } from "./../../utils/utils";
import {
  api_homebanner,
  api_homemenu,
  api_homenews,
  api_homeorder,
  api_userRole
} from "../../service/api/home";
console.log("环境 = "+process.env.NODE_ENV);

export default {
  name: "Home",
  data() {
    return {
      // 首页的轮播图数据
      sowing_list: [],
      // 秒杀数据
      flash_sale_product_list: [],
      // 猜你喜欢
      you_like_product_list: [],
      // 是否显示加载图标
      showLoading: true,
      // 是否显示返回顶部的按钮
      showBackStatus: false,
      orderList: [],
      newsList: [],
      item_list: [],
      wxCode: this.$route.query.code
    };
  },
  created() {
    console.log("home --- created");
    this.reqData();

    if (this.wxCode) {
      console.log("wxcode = " + this.wxCode);
    } else {
      console.log("未定义的wxcode = " + this.wxCode);
    }
  },
  components: {
    Sowing,
    TitleLabel,
    YouLike,
    MarkPage,
    HomeNewsDiv,
    OrderDynamics
  },
  methods: {
    ...mapActions(["syncUserInfo"]),

    async reqData() {
      // 1。请求首页banner数据
      let bannerRes = await api_homebanner();
      if (bannerRes.success) console.log("bannerRes成功");
        if (bannerRes.data){
          this.sowing_list = bannerRes.data;
      }
      // 2。 请求新闻数据
      let newsRes = await api_homenews();
        if (newsRes.data) {
            this.newsList = newsRes.data;
        }

      var userRole = "";
      let userInfo = JSON.parse(getStore("userInfo"));

      if (userInfo) {
        userRole = userInfo.role;

          // console.log("最开始取到本地保存 userRole = "+userRole + "nickName = " + userInfo.nickName + userInfo.jwt);

      }

      if (userInfo) {
        let roleInfo = await api_userRole();
        userRole = roleInfo.data.role;
        userInfo.role = userRole;

          // console.log("role校验 userRole = "+userRole + "nickName = " + userInfo.nickName);

        this.syncUserInfo(userInfo);

          // console.log("请求前 userRole = "+userRole + "role = " + userInfo.role);

      }


        let menuRes = await api_homemenu(userRole);

      if (menuRes.data){
          this.item_list = menuRes.data;
          for (var i = 0; i < this.item_list.length; i++) {
              var item = this.item_list[i];
              item.icon = addImagePrefix(item.icon);
          }
      }


      this.showLoading = false;

      // if(userInfo.role === 'USER'){
      //
      //     let orderRes = await api_homeorder();
      //     this.orderList = orderRes.data;
      // }

      if (userInfo) {
        let orderRes = await api_homeorder();
        this.orderList = orderRes.data;
      }
    },
    scrollToTop() {
      let docB = document.documentElement || document.body;
      animate(docB, { scrollTop: "0" }, 400, "ease-out");
    },
    clickGridItem(value) {
      actionWithLink(value.link);
    },
    moreOrder() {
      if (this.isMaster) {
        if (this.isHeadMan) {
          this.$router.push({ name: "dispatchOrder" });
        } else {
          this.$router.push({ path: "/dashboard/masterOrder" });
        }
      } else {
        this.$router.push({ path: "/dashboard/order" });
      }
    },
    allNews() {
      this.$router.push({ path: "/dashboard/home/newCenter" });
    }
  },
  computed: {
    ...mapState(["userInfo"]),
    isMaster() {
      if (
        this.userInfo &&
        (this.userInfo.role === "HEADMAN" || this.userInfo.role === "MASTER")
      ) {
        return true;
      }
      return false;
    },
    isHeadMan() {
      if (this.userInfo && this.userInfo.role === "HEADMAN") {
        return true;
      }
      return false;
    }
  }
};
</script>

<style lang="less">
#home {
  width: 100%;
  height: 100%;
  background-color: #f6f8fb;
}
.tabbarShelter {
  height: 53px;
}

.vangridStyle {
  margin-top: 1.3333333333333333rem;
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;
  height: 6.88rem;
  border-radius: 0.32rem;
  padding: 5px;
  background-color: white;
  .van-grid-item__text {
    color: #7a8491;
    font-size: 0.8rem;
    font-family: "PingFangSC-Regular";
  }
  .van-grid-item__icon {
    font-size: 2rem;
  }
}

/*转场动画*/
.router-slider-enter-active,
.router-slider-leave-active {
  transition: all 0.3s;
}

.router-slider-enter,
.router-slider-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
